Ext.define('MyApp.view.catalog.DocInfoView', {
    extend: 'Ext.panel.Panel',
    xtype: 'docinfoview',
    autoScroll: true,
    initComponent: function() {
        this.tbar = {
            plugins: {
                xclass: 'Ext.ux.BoxReorderer',
                listeners: {
                    scope: this,
                    drop: this.updateStoreSorters
                }
            },
            defaults: {
                listeners: {
                    scope: this,
                    changeDirection: this.updateStoreSorters
                }
            },
            items: [{
                xtype: 'tbtext',
                text: '排序方式:',
                reorderable: false
            }, {
                xtype: 'dataview-multisort-sortbutton',
                text : '类型',
                dataIndex: 'type'
            }, {
                xtype: 'dataview-multisort-sortbutton',
                text : '名称',
                dataIndex: 'name'
            },'-',{
                xtype: 'tbtext',
                text: '过滤:',
                reorderable: false
            }, {
                xtype: 'button',
                text : 'doc',
                type : 'filterButton',
                dataIndex: 'type',
                dataFilter:'application/msword'
            }, {
                xtype: 'button',
                text : 'docx',
                type : 'filterButton',
                dataIndex: 'type',
                dataFilter:'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            },  {
                xtype: 'button',
                text : 'ppt',
                type : 'filterButton',
                dataIndex: 'type',
                dataFilter:'application/vnd.ms-powerpoint'
            }, {
                xtype: 'button',
                text : 'pptx',
                type : 'filterButton',
                dataIndex: 'type',
                dataFilter:'application/vnd.openxmlformats-officedocument.presentationml.presentation'
            },{
                xtype: 'button',
                text : 'xls',
                type : 'filterButton',
                dataIndex: 'type',
                dataFilter:'application/vnd.ms-excel'
            },{
                xtype: 'button',
                text : 'xlsx',
                type : 'filterButton',
                dataIndex: 'type',
                dataFilter:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            },{
                xtype: 'button',
                text : 'pdf',
                type : 'filterButton',
                dataIndex: 'type',
                dataFilter:'application/pdf'
            },{
                xtype: 'button',
                text : '清除过滤',
                itemId :'clearFilterButton'
            }]
        };
        
        this.items = {
	            xtype: 'dataview',
	            itemSelector: 'div.dataview-multisort-item',
	            store: 'DocInfoStore',
	            tpl: [
	                '<tpl for=".">',
	                    '<div class="dataview-multisort-item" >',
	                        (!Ext.isIE6? '<div style="width:80px;TEXT-ALIGN: center;"><img src="{thumb}" /></div>' : 
	                        '<div style="position:relative;width:80px;height:74px;TEXT-ALIGN: center;'+
	                                 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{thumb}\')"></div>'),
	                        '<div style="width:80px;TEXT-ALIGN: center;"><p>{name}</p></div>',
	                    '</div>',
	                '</tpl>'
	            ],
	            plugins: {
	                xclass: 'Ext.ux.DataView.Animated'
	            },
	            listeners: {
	            }
	        };
        this.callParent(arguments);
        this.updateStoreSorters();
        //this.down('dataview').getStore().load();
    },
    
    /**
     * Returns the array of Ext.util.Sorters defined by the current toolbar button order
     * @return {Array} The sorters
     */
    getSorters: function() {
        var buttons = this.query('toolbar dataview-multisort-sortbutton'),
            sorters = [];
        Ext.Array.each(buttons, function(button) {
            sorters.push({
                property : button.getDataIndex(),
                direction: button.getDirection()
            });
        });
        
        return sorters;
    },
    
    /**
     * @private
     * Updates the DataView's Store's sorters based on the current Toolbar button configuration
     */
    updateStoreSorters: function() {
        var sorters = this.getSorters(),
            view = this.down('dataview');
        view.store.sort(sorters);
    }
});
